﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
	<meta charset="utf-8" />
    <style>
        #mapPage {
            width:100%;
		height: 100vh;
	}
    </style>
</head>
<body>
    <iframe id="mapPage" width="100%" height="100%" frameborder=0 allow="geolocation *;microphone *;camera *" sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-modals" src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=NQQBZ-YDDK4-7G2UP-XCWS6-VMOB5-S5BN3&referer=app&allow=geolocation"></iframe>
    <script src="https://mapapi.qq.com/web/lbs/h5-components/geolocation/geolocation.min.js"></script>
    <script>        
        //const geoInstance = new window.LBS.WebComponent.Geolocation({
        //    key: 'NQQBZ-YDDK4-7G2UP-XCWS6-VMOB5-S5BN3',
        //    referer: "test"
        //});
        //const options = {
        //    timeout: 100000,
        //    highAccuracy: true
        //};
        //geoInstance.getLocation(res => {
        //    let iframe = document.createElement("iframe");
        //    iframe.id = 'mapPage';
        //    iframe.width = '100%';
        //    iframe.height = '100%';
        //    iframe.frameborder = '0';
        //    iframe.src = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=NQQBZ-YDDK4-7G2UP-XCWS6-VMOB5-S5BN3&referer=app&coord=${res.lat},${res.lng}&allow=geolocation`
        //    document.body.appendChild(iframe);
        //    alert(`${JSON.stringify(res)}`)
        //}, err => {
        //    alert(`${JSON.stringify(err)}`)
        //    let iframe = document.createElement("iframe");
        //    iframe.id = 'mapPage';
        //    iframe.width = '100%';
        //    iframe.height = '100%';
        //    iframe.frameborder = '0';
        //    iframe.src = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=NQQBZ-YDDK4-7G2UP-XCWS6-VMOB5-S5BN3&referer=app&allow=geolocation`
        //    document.body.appendChild(iframe);
        //}, options)

    </script>
    
</body>
</html>
